<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="head_box">
			<view class="" style="position:relative;z-index: 10; background: #fff;">
				<cu-custom :isBack="true">
					<block slot="backText">
						<view class="search-box flex align-center" @tap.stop>
							<input @confirm="onSearch" @input="onInput" confirm-type="搜索" class="search flex-sub"
								type="text" v-model="searchVal" placeholder="输入搜索商品" />
							<text v-show="searchVal" @tap="clearSearch" class="cuIcon-roundclosefill"></text>
						</view>
					</block>
				</cu-custom>
			</view>
			<view class="filter-item"><sh-filter @change="onFilter"></sh-filter></view>
		</view>
		<view class="content-box">
			<view class="goods-list x-f" v-if="goodsList.length">
				<u-waterfall v-model="goodsList" ref="uWaterfall">
					<template v-slot:left="{ leftList }">
						<view class="goods-item mb20" v-for="leftGoods in leftList" :key="leftGoods.id">
							<t-goods-card :image="leftGoods.image" :subtitle="leftGoodsc.subtitle"
								:price="leftGoods.price" :originPrice="leftGoods.original_price" :detail="leftGoods"
								@click="$Router.push({ path: '/pages/goods/detail/index', query: { id: leftGoods.id } })">
								<template #title>
									<!-- <text v-if="leftGoods.is_next_day_delivery" style="color: #f5a623;">[次日达] </text> -->
									<text>{{ leftGoods.title }}</text>
								</template>
							</t-goods-card>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view class="goods-item mb20" v-for="rightGoods in rightList" :key="rightGoods.id">
							<t-goods-card :image="rightGoods.image" :subtitle="rightGoods.subtitle"
								:price="rightGoods.price" :originPrice="rightGoods.original_price" :detail="rightGoods"
								@click="$Router.push({ path: '/pages/goods/detail/index', query: { id: rightGoods.id } })">
								<template #title>
									<!-- <text v-if="rightGoods.is_next_day_delivery" style="color: #f5a623;">[次日达] </text> -->
									<text>{{ rightGoods.title }}</text>
								</template>
							</t-goods-card>
						</view>
					</template>
				</u-waterfall>
			</view>
			<!-- 空白页 -->
			<t-empty v-if="!goodsList.length && !isLoading" :emptyData="emptyData"></t-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="goodsList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
		<!-- 登录提示 -->
		<t-login-modal></t-login-modal>
	</view>
</template>

<script>
	import shFilter from './children/sh-filter.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	let timer = null;
	export default {
		components: {
			shFilter
		},
		data() {
			return {
				emptyData: {
					img: this.$IMG_URL + '/empty/empty_goods.png',
					tip: '暂无该商品，还有更多好货等着你噢~'
				},
				goodsList: [],
				searchVal: '',
				listParams: {
					category_id: 0,
					keywords: '',
					page: 1
				},
				isLoading: true, //loading和空白页。
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 1
			};
		},
		computed: {},
		// 触底加载更多
		onReachBottom() {
			if (this.listParams.page < this.lastPage) {
				this.listParams.page += 1;
				this.getGoodsList();
			}
		},
		onLoad() {
			if (this.$Route.query.id) {
				this.listParams.category_id = this.$Route.query.id;
			}
			if (this.$Route.query.keywords) {
				this.listParams.keywords = this.$Route.query.keywords;
			}
			this.getGoodsList();
		},
		methods: {
			onFilter(e) {
				this.listParams.order = e;
				this.goodsList = [];
				this.listParams.page = 1;
				this.$refs.uWaterfall.clear();
				this.$u.debounce(this.getGoodsList);
			},
			// 键盘搜索
			onSearch() {
				let that = this;
				that.listParams.keywords = that.searchVal;
				that.goodsList = [];
				this.listParams.page = 1;
				this.$refs.uWaterfall.clear();
				that.getGoodsList();
			},
			// 输入防抖搜索
			onInput() {
				let that = this;
				that.listParams.category_id = 0;
				// 输入不及时
				setTimeout(() => {
					that.listParams.keywords = that.searchVal;
				}, 0);
				// 防抖
				if (timer !== null) {
					clearTimeout(timer);
				}
				timer = setTimeout(() => {
					that.goodsList = [];
					this.listParams.page = 1;
					that.getGoodsList();
				}, 1000);
			},
			// 清除搜索框
			clearSearch() {
				this.goodsList = [];
				this.searchVal = '';
				this.listParams.keywords = '';
				this.listParams.page = 1;
				this.getGoodsList();
			},
			// 商品列表
			getGoodsList() {
				let that = this;
				that.isLoading = true;
				that.loadStatus = 'loading';
				that.$api('goods.lists', that.listParams).then(res => {
					if (res.code === 1) {
						that.isLoading = false;
						that.goodsList = [...that.goodsList, ...res.data.data];
						that.lastPage = res.data.last_page;
						if (that.listParams.page < res.data.last_page) {
							that.loadStatus = 'loadmore';
						} else {
							that.loadStatus = 'nomore';
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.head_box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}

	.search-box {
		width: 661rpx;
		height: 60rpx;
		background: rgba(245, 245, 245, 1);
		border-radius: 30rpx;
		padding: 0 30rpx;
		// #ifdef MP
		width: 450rpx;

		// #endif
		.search {
			text-align: center;
			font-size: 28rpx;
		}

		.cuIcon-roundclosefill {
			color: #999;
			padding: 0 10rpx;
		}
	}

	.list-box {
		&:-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}
	}

	.content-box {
		padding: 20rpx;
		width: 750rpx;
	}

	.goods-list {
		flex-wrap: wrap;

		.goods-item {
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
</style>